<template>
  <div v-if="direction === 'vertical'" class="vertical-divider"></div>
  <div v-else class="horizontal-divider"></div>
</template>    
	  
  <script setup>
const props = defineProps({
  direction: {
    type: String,
    required: true,
    validator: (value) => {
      return ["vertical", "horizontal"].includes(value);
    },
  },
});
</script>    
	  
<style scoped>

.vertical-divider {
  width: 2px;
  height: 100%;
  background-color: transparent;
  border-left: 2px solid rgba(201, 201, 201, 0.6);
  margin: 0 10px;
}

.horizontal-divider {
  width: 100%;
  height: 2px;
  background-color: transparent;
  border-top: 2px solid rgba(201, 201, 201, 0.6);
  margin: 10px 0;
}
</style>